import * as React from "react";
import { Modal, Table, Spin } from "antd";
import { getEnergyAccountDetail } from "../../../ServeApi";
import {
  AjaxData,
  columnsDataCLass,
} from "../../../../../../data/interface/publicInterface";
export interface AmountTableProps {
  energyTypeId: string;
  action: number;
}

export interface AmountTableState {
  loading: boolean;
}

class AmountTable extends React.Component<AmountTableProps, AmountTableState> {
  state = { loading: false };
  private pageIndex: number = 1;
  private pageSize: number = 10;
  private total: number = 0;
  private type: string = "1";
  private dataSouce: any = null;
  private columns: columnsDataCLass[] = [
    {
      title: "能源类型",
      dataIndex: "energyTypeId",
      key: "energyTypeId",
    },
    {
      title: "上次余量",
      dataIndex: "preAmount",
      key: "preAmount",
    },
    {
      title: "操作数量",
      dataIndex: "optAmount",
      key: "optAmount",
    },
    {
      title: "本次余量",
      dataIndex: "curAmount",
      key: "curAmount",
    },
    {
      title: "计量单位",
      dataIndex: "unit",
      key: "unit",
    },
    {
      title: "数据时间",
      dataIndex: "optTime",
      key: "optTime",
    },
  ];
  render() {
    return (
      <div className="AmountTable" style={{ paddingTop: 16 }}>
        <div className="rowcon_body" style={{ paddingTop: 16 }}>
          <Spin spinning={this.state.loading}>
            <Table
              columns={this.columns}
              dataSource={this.dataSouce}
              pagination={{
                pageSize: this.pageSize,
                total: this.total,
                current: this.pageIndex,
                onChange: (page: number) => {
                  this.pageIndex = page;
                  this.setPream();
                },
              }}
            />
          </Spin>
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.setPream();
  }
  shouldComponentUpdate(newProps, newState) {
    if (newProps.action !== this.props.action) {
      this.type = newProps.energyTypeId;
      this.setPream();
    }
    return true;
  }
  setPream(type?: string) {
    let pream = {
      energyTypeId: type ? type : this.type,
      pageIndex: this.pageIndex,
      pageSize: this.pageSize,
    };
    this.getEnergyAccountDetail(pream);
  }
  //请求表格
  async getEnergyAccountDetail(item) {
    let _this = this;
    try {
      this.setState({ loading: true });
      let res: any = await getEnergyAccountDetail(JSON.stringify(item)).catch(
        (err) => {
          console.log(err);
          _this.setState({ loading: false });
        }
      );
      let json: AjaxData = res;
      if (json.success) {
        _this.dataSouce = json.data.records;
        _this.total = json.data.total;
        _this.forceUpdate();
        _this.setState({ loading: false });
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {
            _this.setState({ loading: false });
          },
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {
          _this.setState({ loading: false });
        },
      });
      console.error(error);
    }
  }
}

export default AmountTable;
